<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div style="font-size: 12px; line-height: 60px; display: flex">

    <!--收缩/折叠图标块-->
    <div style="flex: 1; font-size: 20px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
    </div>

    <span style="margin-top: 8px; margin-right: 7px">
        <el-avatar :src="user.avatar"></el-avatar>
    </span>
    <!--下拉菜单组件-->
    <el-dropdown style="cursor: pointer" trigger="click">
      <!--登录时获取用户昵称并显示-->

      <span>{{this.$store.state.nickname}}<i class="el-icon-arrow-down"></i></span>
      <!--下拉菜单-->
      <el-dropdown-menu slot="dropdown" style="background-color: #0984e3">
        <!--修改密码-->
        <el-dropdown-item class="dropdown">
          <el-button type="danger" icon="el-icon-edit" @click="editAvatar" class="editColor">编辑头像</el-button>
        </el-dropdown-item>

        <el-dropdown-item  class="dropdown">
          <el-button type="danger" icon="el-icon-edit" @click="changePassword" class="editColor">修改密码</el-button>
        </el-dropdown-item>
        <!--退出-->
        <el-dropdown-item  class="dropdown" >
          <el-button type="danger" icon="el-icon-circle-close" @click="exit" class="editColor">退出登录</el-button>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!--修改密码对话框-->
    <el-dialog title="修改密码" :visible.sync="FormVisible" width="30%">
      <el-form label-width="100px">
        <!--旧密码输入框-->
        <el-form-item label="旧密码：">
          <el-input v-model="Form.password" placeholder="请输入旧密码" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--新密码输入框-->
        <el-form-item label="新密码：">
          <el-input v-model="Form.newPassword" placeholder="请输入新密码" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--修改密码对话框按钮-->
      <div slot="footer">
        <!--关闭对话框按钮-->
        <el-button @click="FormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>


    <el-dialog title="编辑头像" :visible.sync="avatarVisible" width="30%">
      <el-form label-width="100px" style="text-align: center">
        <el-upload
            class="avatar-uploader"
            :action="'http://localhost:8082/files/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="avatarForm.avatar" :src="avatarForm.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form>
      <!--修改密码对话框按钮-->
      <div slot="footer">
        <!--关闭对话框按钮-->
        <el-button @click="avatarVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveAvatar">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Header",
  props:{
    collapseBtnClass: String,
    collapse: Boolean,
  },
  data(){
    return{
      avatarForm:{
        id: this.$store.state.id,
        avatar:''
      },
      avatarVisible: false,
      FormVisible: false,
      Form:{ },
      user: localStorage.getItem("access-admin") ? JSON.parse(localStorage.getItem("access-admin")) : {}
    }
  },
  methods: {
    //显示修改密码对话框
    changePassword(){
      this.Form = {}  //每次打开修改密码对话框时清空表单数据，这样不会保留上次填写时留下的数据
      this.FormVisible = true   //显示修改密码对话框
    },
    editAvatar(){
      this.avatarVisible = true
      this.avatarForm.avatar = ""
    },
    //修改密码功能
    saveEdit() {
      this.Form.id = this.$store.state.id
      this.request.post('/user/password',this.Form).then(response=>{
        if (response.data.code === '200'){
          this.$message.success('成功更改密码')
          this.FormVisible = false
        }
        else {
          this.$message.error('密码修改失败')
        }
      })
    },
    //退出登录功能
    exit(){
      localStorage.removeItem('access-admin')
      this.$router.replace({path:'/Home'})
    },
    saveAvatar(){
      this.request.post("/user/avatar", this.avatarForm).then(res=>{
        if (res.data.code === '200'){
          this.user.avatar = this.avatarForm.avatar
          localStorage.setItem("access-admin", JSON.stringify(this.user))
          this.avatar =this.avatarForm.avatar
          this.$message.success("保存成功");
          this.avatarVisible = false
        }else
          this.$message.error("保存失败")
      })
    },
    handleAvatarSuccess(res){
      this.avatarForm.avatar = res
    }
  }
}
</script>

<style scoped>
/*下拉菜单样式*/
.dropdown{
  font-size: 14px;
  padding: 0;
}
/*修改密码按钮样式*/
.editColor{
  border-radius:0
}
</style>

<style>
.el-dropdown-menu[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color:#0984e3;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>